<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="datagridID" class="easyui-datagrid"
       data-options="url:'${pageContext.request.contextPath}/BookServlet?action=findAllBook',fitColumns:true,singleSelect:true,fit:true,toolbar:'#toolbar'">
    <thead>
    <tr>
        <th data-options="field:'id',width:'50'">编号</th>
        <th data-options="field:'name',width:'50'">名称</th>
        <th data-options="field:'author',width:'50'">作者</th>
        <th data-options="field:'price',width:'50'">价格</th>
        <th data-options="field:'des',width:'50'">描述</th>
        <th data-options="field:'photoPath',width:'50'" formatter="formatPic">图片</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newBook()">New
        Book</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editBook()">Edit
        Book</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyBook()">Remove
        Book</a>
</div>
<div id="dialogID" class="easyui-dialog" style="width:450px;height:350px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <form id="formID" method="post" enctype="multipart/form-data">
        <table>
            <caption>图书信息</caption>
            <tr>
                <td>书名:</td>
                <td><input name="name" class="easyui-validatebox" required="true"></td>
            </tr>
            <tr>
                <td>作者:</td>
                <td><input name="author" class="easyui-validatebox" required="true"></td>
            </tr>
            <tr>
                <td>价格:</td>
                <td><input name="price" class="easyui-numberbox" required="true" data-options="min:0,precision:2"></td>
            </tr>
            <tr>
                <td>描述:</td>
                <td><input name="des" class="easyui-textbox" required="true" data-options="multiline:true"
                           style="width:300px;height:100px"></td>
            </tr>
            <tr>
                <td>图片:</td>
                <td><input name="photoPath" class="easyui-filebox" buttonText="请选择文件..." accept="image/jpeg,image/png">
                </td>
            </tr>
            <tr>
                <td id="fileName"></td>
            </tr>
            <tr>
                <td id="uploadInfo"></td>
            </tr>
        </table>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#dialogID').dialog('close')">取消</a>
</div>
<script type="text/javascript">
    $("#datagridID").datagrid({
        onLoadError:function () {
           // location.href="/day55/message.jsp";
        }
    });
    function newBook() {
        $('#dialogID').dialog('open').dialog('setTitle', 'New Book');
        $('#formID').form('clear');
        url = '${pageContext.request.contextPath}/BookServlet?action=addBook';
    }
    function editBook() {
        var row = $('#datagridID').datagrid('getSelected');
        if (row) {
            $('#dialogID').dialog('open').dialog('setTitle', 'Edit Book');
            $('#formID').form('load', row);
            url = '${pageContext.request.contextPath}/BookServlet?action=editBook&id=' + row.id;
        }
    }
    function destroyBook() {
        var row = $('#datagridID').datagrid('getSelected');
        if (row) {
            $.messager.confirm('提示', '真的要删除这本书吗?', function (r) {
                if (r) {
                    $.post('${pageContext.request.contextPath}/BookServlet?action=delOneBook', {id: row.id}, function (result) {
                        alert(result.success);
                        if (result.success) {
                            alert("成功");
                            $('#datagridID').datagrid('reload');	// reload the user data
                        } else {
                            $.messager.show({	// show error message
                                title: 'Error',
                                msg: '删除不成功'
                            });
                        }
                    }, 'json');
                }
            });
        }
    }
    function saveUser() {
        $('#formID').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.errorMsg) {
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dialogID').dialog('close');		// close the dialog
                    $('#datagridID').datagrid('reload');	// reload the user data
                }
            }
        });
    }
    function formatPic(value, row, index) {
        var path = row.photoPath;
        return "<img src='${pageContext.request.contextPath}/img/" + path + "' width='60px' height='60px'/>";
    }
</script>
</body>
</html>
